<template>
	<view class="container">
		<image src="/static/bg.png" class="bg" mode=""></image>
		<view class="userAvar">
			<!-- <image src="" mode=""></image> -->
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c f-j-c">
				<view class="name">
					读书会
				</view>
			</view>
		</view>
		<view class="body p-20">
			<view @click="bigSmall" class="top f f-a-c f-j-c f-d-c">
				<image src="/static/home/book.png" class="drill" mode=""></image>
				<view class="bigSmall">
					阅读评测
				</view>
			</view>
			<view @click="startOfBudget" class="bot f f-a-c f-j-c f-d-c">
				<image src="/static/home/zu.png" class="drill" mode=""></image>
				<view class="bigSmall">
					阅读通关
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo')
			}
		},
		methods: {
			// 跳转到读书会
			bigSmall() {
				if (this.userinfo.profile && this.userinfo.profile.identity == 3) {
					uni.navigateTo({
						url: '/pages/ReadingParty/ReadingPartyList'
					})

				} else {
					this.$msg('请先升级会员')
				}
			},
			// 跳转到阅读通关
			startOfBudget() {
				if (this.userinfo.profile && this.userinfo.profile.identity != 3) {
					this.$msg('请先升级会员')
				} else {
					uni.navigateTo({
						url: '/pages/ReadingParty/ReadThrough'
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 45%;
		width: 100%;
		border-radius: 40rpx;
		margin-bottom: 4%;
		background-color: #f3f9ff;


		.drill {
			width: 106rpx;
			height: 106rpx;
		}

		.bigSmall {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #009D85;
			margin-top: 15rpx;
		}
	}

	.bot {
		height: 45%;
		width: 100%;
		border-radius: 40rpx;
		background: #fef8f3;

		.drill {
			width: 90rpx;
			height: 98rpx;
		}

		.bigSmall {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #FABE00;
			margin-top: 15rpx;
		}
	}

	.body {
		height: calc(100vh - 180rpx);
		overflow-y: auto;
		background-color: #fff;
	}

	.container {
		height: 100vh;
		width: 100%;
		padding-top: 180rpx;
		overflow-y: auto;
	}

	.bg {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 338rpx;
	}

	.userAvar {
		position: fixed;
		top: 0%;
		left: 0;
		height: 180rpx;
		width: 100%;
		// background-color: #fff;
		z-index: 99;
	}

	.topHeacd {
		height: 70rpx;
	}

	.biaoti {
		height: 90rpx;
		width: 100%;

		// background-color: pink;
		.inp {
			width: 100%;
			height: 72rpx;
			background: #ffffff;
			border-radius: 36rpx;
			padding-left: 50rpx;
		}

	}

	.name {
		font-size: 30rpx;
		font-weight: 700;
		text-align: center;
	}
</style>